<template>
  <div class="mb-20" style="padding-top:44px;">
    <NavBar />
    <div class="flex justify-center">
      <div class="container-width">
        <div class="main">
          <div class="xinxizixun mt-8 ">
            项目入驻
          </div>
          <div class="sousuo mt-2 flex justify-between">
            <div class="sousuotext">
              全国1300+园区详情，随需调用
            </div>
            <div class="sousuoinput flex flex-row">
              <!--
              <div class="inputlable">
                <el-select v-model="projectListQuery.queryOption" placeholder="全站搜索">
                  <el-option
                    v-for="item in QueryOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </div>
              -->
              <div class="inputcontent">
                <el-input v-model="projectListQuery.projectname" placeholder="搜索项目"></el-input>
              </div>
              <div class="sousuobutton" @click="handleFilter" style="cursor: pointer;">
                搜索
              </div>
            </div>
          </div>
          <div class="sousuotiaojian p-4">
            <div class="tiaojianhang flex flex-row">
              <div class="w-16 text-[12px] text-[#9C9C9C]">
                省份：
              </div>
              <div class="flex-1 flex flex-row flex-wrap text-[12px]">
                <div class="flex justify-center items-center px-2 mb-2" :class="projectListQuery.province ? '' : 'active'" @click="selectProvince(0)" style="cursor: pointer;height: 21px;">
                  全部
                </div><div class="flex flex-row" style="width: 750px;flex-flow: wrap;padding: 0 0.25rem;">
                <div v-for="(item, index) in provinces" :key="index" class="flex justify-center items-center px-2 mb-2" :class="projectListQuery.province === item.provincecode ? 'active' : ''" @click="selectProvince(item.provincecode, item.name)" style="cursor: pointer;">
                  {{item.name}}
                </div></div>
              </div>
            </div>
            <div class="tiaojianhang flex flex-row">
              <div class="w-16 text-[12px] text-[#9C9C9C]" style="font-size: 12px;">
                产业类型：
              </div>
              <div class="tiaojianhangtype  flex flex-row" style="font-size: 12px;">
                <div class="flex justify-center items-center px-2 mb-2" :class="projectListQuery.hangyeleixing ? '' : 'active'" @click="selectHangYeLeiXing(0)" style="cursor: pointer;height: 21px;">
                  全部
                </div><div class="flex flex-row" style="width: 750px;flex-flow: wrap;padding: 0 0.25rem;">
                <div v-for="(item, index) in bs_hangyeleixing" :key="index" class="flex justify-center items-center px-2 mb-2" :class="projectListQuery.hangyeleixing === item.dictValue ? 'active' : ''" @click="selectHangYeLeiXing(item.dictValue)" style="cursor: pointer;">
                  {{item.dictLabel}}
                </div></div>
              </div>
            </div>
            <div class="tiaojianhang flex flex-row">
              <div class="w-16 text-[12px] text-[#9C9C9C]" style="font-size: 12px;">
                需求类型：
              </div>
              <div class="tiaojianhangtype  flex flex-row" style="font-size: 12px;">
                <div class="flex justify-center items-center px-2 mb-2" :class="projectListQuery.xiangmuleixing ? '' : 'active'" @click="selectXiangMuLeiXing(0)" style="cursor: pointer;height: 21px;">
                  全部
                </div><div class="flex flex-row" style="width: 750px;flex-flow: wrap;padding: 0 0.25rem;">
                <div v-for="(item, index) in sys_xiangmuleixing" :key="index" class="flex justify-center items-center px-2 mb-2" :class="projectListQuery.xiangmuleixing === item.dictValue ? 'active' : ''" @click="selectXiangMuLeiXing(item.dictValue)" style="cursor: pointer;">
                  {{item.dictLabel}}
                </div></div>
              </div>
            </div>
            <div class="tiaojianhang flex flex-row">
              <div class="w-16 text-[12px] text-[#9C9C9C]" style="font-size: 12px;">
                对接级别：
              </div>
              <div class="tiaojianhangtype  flex flex-row" style="font-size: 12px;">
                <div class="flex justify-center items-center px-2 mb-2" :class="projectListQuery.duijiejibie ? '' : 'active'" @click="selectDuiJieJiBie(0)" style="cursor: pointer;height: 21px;">
                  全部
                </div><div class="flex flex-row" style="width: 750px;flex-flow: wrap;padding: 0 0.25rem;">
                <div v-for="(item, index) in bs_projectduijiejibie" :key="index" class="flex justify-center items-center px-2 mb-2" :class="projectListQuery.duijiejibie === item.dictValue ? 'active' : ''" @click="selectDuiJieJiBie(item.dictValue)" style="cursor: pointer;">
                  {{item.dictLabel}}
                </div></div>
              </div>
            </div>
          </div>
          <div class="fuhetiaojian flex justify-between ">
            <div class="fuhenum" style="font-size: 12px;">
              共有符合条件的项目 <span>{{total}} </span>条
            </div>
            <!-- <div class="fabutime" style="font-size: 12px;cursor: pointer;" :class="projectListQuery.orderbyfield === 3 ? 'active':''" @click="orderByField(3)">
              发布时间
            </div> -->
          </div>
          <div class="duijiecontent flex ">
            <div class="content">
              <div class="xiangmutype flex flex-row" style="font-size: 12px;">
                <div class="suoyouxiangmu" :class="projectListQuery.ifshouyetuijian === undefined ? 'active':''" @click="setShouYeTuiJian('undefined')" style="cursor: pointer;">
                  所有项目
                </div>
                <div class="suoyouxiangmu" :class="projectListQuery.ifshouyetuijian === 'Y' ? 'active':''" @click="setShouYeTuiJian('Y')" style="cursor: pointer;">
                  推荐项目
                </div>
              </div>
              <div v-for="(item, index) in projectList" :key="index" class="contentitem flex justify-between" @click="goToProjectDetailView(item)" style="cursor: pointer;">
                <div class="left">
                  <div class="hang flex flex-row">
                    <div>
                      <div class="shangji flex justify-center items-center">
                        {{item.shangji}}
                      </div>
                    </div>
                    <div class="title">
                      {{item.projectname}}
                    </div>
                  </div>
                  <div class="hang flex flex-row">
                    <div class="keyvalueitem flex flex-row">
                      <div class="itemkey">
                        项目类型：
                      </div>
                      <div class="itemvalue">
                        {{ item.xiangmuleixing }}
                      </div>
                    </div>
                    <div class="keyvalueitem flex flex-row">
                      <div class="itemkey">
                        对象级别：
                      </div>
                      <div class="itemvalue">
                        {{ item.duixiangjibie }}
                      </div>
                    </div>
                    <div class="keyvalueitem flex flex-row">
                      <div class="itemkey">
                        就业人数：
                      </div>
                      <div class="itemvalue">
                        {{item.jiuyerenshu}}
                      </div>
                    </div>
                  </div>
                  <div class="hang flex flex-row">
                    <div class="keyvalueitem flex flex-row">
                      <div class="itemkey">
                        意向区域：
                      </div>
                      <div class="itemvalue">
                        {{item.provincename}}  {{item.cityname}}
                      </div>
                    </div>
                    <div class="keyvalueitem flex flex-row">
                      <div class="itemkey">
                        注册资本：
                      </div>
                      <div class="itemvalue">
                        {{item.zhuceziben}}
                      </div>
                    </div>
                    <div class="keyvalueitem flex flex-row">
                      <div class="itemkey">
                        对接级别：
                      </div>
                      <div class="itemvalue">
                        {{ item.duijiejibie }}
                      </div>
                    </div>
                  </div>
                  <div class="hang flex flex-row">
                    <div class="itemkey">
                      商业产业：
                    </div>
                    <div class="itemvalue flex flex-row">
                      <div v-for="(citem, cindex) in item.biaoqianArr" :key="cindex" class="itemvalues ">
                        {{citem}}
                      </div>
                    </div>
                  </div>
                </div>
                <div class="right">
                  <div class="shenhestatus">
                    {{item.shenpizhuangtai}}
                  </div>
                  <div class="righttime">
                    <div><i class="el-icon-time"></i></div>
                    <div style="
    overflow: hidden;
    white-space: nowrap;
    width: 68px;
">{{item.createTime}}</div>
                  </div>
                </div>
              </div>
              <pagination v-show="total>0" :total="total" :page.sync="projectListQuery.pageNum" :limit.sync="projectListQuery.pageSize" @pagination="getProjectList" />
            </div>
            <div class="duijie" style="position: relative;" id="createParkForm">
              <div :class="whether ? 'isFixed' : ''">

                <div class="duijieitem">
                  <div class="duijiehang">
                    <div class="px-4 py-2">
                      <div class="duijiexiangmu">
                        创建项目
                      </div>
                    </div>
                    <div class="px-4 py-2">
                      <el-input
                        placeholder="项目名称"
                        v-model="projectForm.objectname"
                        prefix-icon="el-icon-school">
                      </el-input>
                    </div>
                    <div class="px-4 py-2">
                      <el-input
                        placeholder="姓名"
                        v-model="projectForm.name"
                        prefix-icon="el-icon-user">
                      </el-input>
                    </div>
                    <div class="px-4 py-2">
                      <el-input
                        placeholder="电话（必填）"
                        v-model="projectForm.mobile"
                        prefix-icon="el-icon-mobile-phone">
                      </el-input>
                    </div>
                    <div class="px-4 py-2">
                      <div class="fasong" @click="addContact('project')" style="cursor: pointer;">
                        发送
                      </div>
                    </div>
                  </div>
                </div>

                <div class="duijieitem">
                  <div class="duijiehang">
                    <div class="px-4 py-2">
                      <div class="duijiexiangmu">
                        我要对接
                      </div>
                    </div>
                    <div class="px-4 py-2">
                      <el-radio v-model="form.type" label="3">政府园区</el-radio>
                      <el-radio v-model="form.type" label="4">企业</el-radio>
                      <el-radio v-model="form.type" label="5">其他</el-radio>
                    </div>
                    <div class="px-4 py-2">
                      <el-input
                        placeholder="姓名"
                        v-model="form.name"
                        prefix-icon="el-icon-user">
                      </el-input>
                    </div>
                    <div class="px-4 py-2">
                      <el-input
                        placeholder="电话（必填）"
                        v-model="form.mobile"
                        prefix-icon="el-icon-mobile-phone">
                      </el-input>
                    </div>
                    <div class="px-4 py-2">
                      <div class="fasong" @click="addContact('duijie')" style="cursor: pointer;">
                        发送
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { fetchProjectList } from '@/api/project'
import { fetchProvinceList } from '@/api/province'
import { fetchDictList } from '@/api/dict'
import { createContact } from '@/api/contact'
import NavBar from "@/components/NavBar.vue"
import Pagination from '@/components/Pagination' // secondary package based on el-pagination

export default {
  name: 'ProjectJoinView',
  components: {
    Pagination,
    NavBar
  },
  data() {
    return {
      whether: false,
      total: 0,
      projectForm: {
        objectname: '',
        name: '',
        mobile: '',
        duijiefenlei:3
      },
      form: {
        type: '3',
        name: '',
        mobile: '',
        duijiefenlei:4
      },
      QueryOptions: [{
        value: 0,
        label: '全站搜索'
      }],
      projectListQuery: {
        pageNum: 1,
        pageSize: 10,
        queryOption: 0,
        ifshouyetuijian: undefined,
        orderbyfield: '',
        projectname: undefined,
        province: undefined,
        xiangmuleixing: undefined,
        hangyeleixing: undefined,
        duijiejibie: undefined
      },
      projectList: [],
      provinces: [],
      bs_hangyeleixing: [], // 园区类型
      sys_xiangmuleixing: [], // 园区级别
      bs_projectduijiejibie: [], // 行业类型
      loading: false
    }
  },
  created() {
    fetchProvinceList().then(response => {
      this.provinces = response.data
    })
    fetchDictList({dictType: 'bs_hangyeleixing'}).then(response => {
      this.bs_hangyeleixing = response.data
    })
    fetchDictList({dictType: 'sys_xiangmuleixing'}).then(response => {
      this.sys_xiangmuleixing = response.data
    })
    fetchDictList({dictType: 'bs_projectduijiejibie'}).then(response => {
      this.bs_projectduijiejibie = response.data
    })
  },
  mounted() {
    if (this.$route.query.searchKey !== undefined && this.$route.query.searchKey !== '') {
      this.projectListQuery.projectname = this.$route.query.searchKey
    }
    this.getProjectList()
    window.addEventListener('scroll', this.handleScroll)
  },
  destroyed() {
    window.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    getProjectList() {
      this.loading = true
      fetchProjectList(this.projectListQuery).then(response => {
        this.total = response.total
        this.projectList = response.data
        this.loading = false
      })
    },
    handleFilter() {
      this.getProjectList()
    },
    addContact(type) {
      if (type === 'project') {
        createContact(this.projectForm).then(response => {
          // console.info(response.data)
          if (response.result === 1) {
            this.projectForm = {
              objectname: '',
              name: '',
              mobile: '',
              duijiefenlei:3
            }
            this.$notify({
              title: '成功',
              message: response.msg,
              type: 'success',
              duration: 2000
            })
          }
        })
      } else {
        createContact(this.form).then(response => {
          if (response.result === 1) {
            this.form = {
              type: '3',
              name: '',
              mobile: '',
              duijiefenlei:4
            }
            this.$notify({
              title: '成功',
              message: response.msg,
              type: 'success',
              duration: 2000
            })
          }
        })
      }
    },
    selectProvince(value) {
      if (value === 0) {
        this.projectListQuery.province = undefined
      } else {
        this.projectListQuery.province = value
      }
      this.handleFilter()
    },
    selectDuiJieJiBie(value) {
      if (value === 0) {
        this.projectListQuery.duijiejibie = undefined
      } else {
        this.projectListQuery.duijiejibie = value
      }
      this.handleFilter()
    },
    selectXiangMuLeiXing(value) {
      if (value === 0) {
        this.projectListQuery.xiangmuleixing = undefined
      } else {
        this.projectListQuery.xiangmuleixing = value
      }
      this.handleFilter()
    },
    selectHangYeLeiXing(value) {
      if (value === 0) {
        this.projectListQuery.hangyeleixing = undefined
      } else {
        this.projectListQuery.hangyeleixing = value
      }
      this.handleFilter()
    },
    setShouYeTuiJian(value) {
      if (value === 'undefined') {
        this.projectListQuery.ifshouyetuijian = undefined
      } else {
        this.projectListQuery.ifshouyetuijian = value
      }
      this.handleFilter()
    },
    goToProjectDetailView(project) {
      this.$router.push({ name: 'project-detail', params: { id: project.id }})
    },
    handleScroll() {
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      var offsetTop = document.querySelector('#createParkForm').offsetTop
      this.whether = scrollTop > offsetTop
    }
  }
}
</script>
<style lang="scss" scoped>
.isFixed {
  position: sticky;
  top: 50px;
  z-index: 600;
}
.contain {
  display: flex;
  justify-content: space-between;
}

.main {}

.main .xinxizixun {
  width: 8.625rem;
  height: 2.625rem;
  font-size: 1.875rem;
  font-family: PingFangHK-Semibold, PingFangHK;
  font-weight: 600;
  color: #000000;
  line-height: 2.625rem;
  letter-spacing: 0.125rem;
}

/* sousuo开始 */
.main .sousuo {
  align-items: baseline;
}

.main .sousuo .sousuotext {
  width: 15.875rem;
  height: 1.25rem;
  font-size: 0.875rem;
  font-family: PingFangHK-Regular, PingFangHK;
  font-weight: 400;
  color: #000000;
  line-height: 1.25rem;
}

.main .sousuo .sousuoinput {
  margin-left: 4.375rem;
  width: 34.9375rem;
  height: 2.375rem;
  background: #FFFFFF;
  position: relative;
}

.main .sousuo .sousuoinput .inputlable {
  font-size: 0.875rem;
  font-family: PingFangHK-Medium, PingFangHK;
  font-weight: 500;
  color: #5D6069;
  line-height: 1.25rem;
  border-right: 0.0625rem solid #EFEFEF;

  .el-select {
    ::v-deep .el-input {
      .el-input__inner {
        width: 122px;
        border: 0;
      }
    }
  }
}

.main .sousuo .sousuoinput .inputcontent {
  font-size: 0.875rem;
  font-weight: 600;
  color: #CBCDD1;

  .el-input {
    ::v-deep .el-input__inner {
      border: 0;
    }
  }
}

.main .sousuo .sousuoinput .inputcontent input {
  width: 21.875rem;
}

.main .sousuo .sousuoinput .sousuobutton {
  background: #FE7743;
  font-size: 0.625rem;
  font-family: PingFangHK-Semibold, PingFangHK;
  font-weight: 600;
  color: #FFFFFF;
  line-height: 0.875rem;
  padding: 0.4375rem 0.6875rem;
  margin: 0.3125rem;
  position: absolute;
  top: 0;
  right: 0;
}

/* sousuo结束 */
/* sousuotiaojian开始 */
.main .sousuotiaojian {
  align-items: baseline;
  margin-top: 1.75rem;
  background: #FFFFFF;
}

.main .sousuotiaojian .tiaojianhang {
  margin-top: 0.875rem;
}
.main .sousuotiaojian .tiaojianhang:first-child {
  margin-top: 0px;
}

.main .sousuotiaojian .tiaojianhanglable {
  width: 4.75rem;
  font-size: 0.75rem;
  font-family: PingFangHK-Medium, PingFangHK;
  font-weight: 500;
  color: #9C9C9C;
  padding-left: 0.875rem;
}

.main .sousuotiaojian .tiaojianhangtype {
  font-size: 0.75rem;
  font-family: PingFangHK-Regular, PingFangHK;
  font-weight: 400;
  color: #000000;
}

.main .sousuotiaojian .active {
  color: #FF5F00;
  border-radius: 0.25rem;
  border: 0.0625rem solid #FF5F00;
  padding: 0rem 0.375rem;
}

.main .sousuotiaojian .tiaojianhangtype .tiaojianhangtypeitem {
  margin-left: 1.5rem;
}



/* sousuotiaojian结束 */

/* fuhetiaojian开始 */
.main .fuhetiaojian {
  margin-top: 1.8125rem;
}

.main .fuhetiaojian .fuhenum {
  font-size: 0.75rem;
  font-family: PingFangHK-Medium, PingFangHK;
  font-weight: 500;
  color: #9C9C9C;
}

.main .fuhetiaojian .fuhenum span {
  color: #FF5F00;
}

.main .fuhetiaojian .fabutime {
  font-size: 0.75rem;
  font-family: PingFangHK-Medium, PingFangHK;
  font-weight: 500;
  color: #FE7743;
}

/* fuhetiaojian结束 */

/* content开始 */
.main .duijiecontent {
  margin-top: 0.875rem;
}

.main .duijiecontent .content {
  padding-right: 1.0625rem;
  padding-bottom: 1.25rem;
  width: 37.0625rem;
  background: #FFFFFF;
  flex: 1;
}

.main .duijiecontent .content .xiangmutype{
  padding-left: 0.8125rem;
  border-bottom: 1px solid #F9FAF9;
}

.main .duijiecontent .content .xiangmutype .suoyouxiangmu {
  height: 40px;
  font-size: 14px;
  font-weight: 600;
  color: #000000;
  margin-right: 1.25rem;
  display: flex;
  align-items: center;
  border-bottom: 2px solid #FFFFFF;
}
.main .duijiecontent .content .xiangmutype .suoyouxiangmu.active {
  height: 40px;
  color: #FF6C2E;
  border-bottom: 2px solid #FE783F;
}

.main .duijiecontent .content .xiangmutype .tuijianxiangmu{
  font-size: 0.875rem;
  font-family: PingFangHK-Semibold, PingFangHK;
  font-weight: 600;
  margin-bottom: 0.75rem;
  margin-right: 1.25rem;
}

/* sfasdfadfa */
.main .duijiecontent .content .contentitem {
  padding-top: 1.3125rem;
  border-bottom: 1px solid #F9FAF9;
}

.main .duijiecontent .content .contentitem .left {
  flex: 1;
  padding-left: 0.8125rem;
}

.main .duijiecontent .content .contentitem .left .hang {
  margin-bottom: 1.0625rem;
}

.main .duijiecontent .content .contentitem .left .hang .shangji {
  width: 67px;
  height: 21px;
  font-size: 11px;
  font-weight: 600;
  color: #FFFFFF;
  background: #FF5F00;
  border-radius: 11px;
}

.main .duijiecontent .content .contentitem .left .hang .title {
  margin-left: 8px;
  font-size: 0.875rem;
  font-family: PingFangHK-Medium, PingFangHK;
  font-weight: 500;
  color: #000000;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.main .duijiecontent .content .contentitem .left .hang .keyvalueitem {
  width: 8.5rem;
}

.main .duijiecontent .content .contentitem .left .hang .itemkey {
  font-size: 0.75rem;
  font-family: PingFangHK-Medium, PingFangHK;
  font-weight: 500;
  color: #9C9C9C;
}

.main .duijiecontent .content .contentitem .left .hang .itemvalue {
  font-size: 0.75rem;
  font-family: PingFangHK-Regular, PingFangHK;
  font-weight: 400;
  color: #000000;
}

.main .duijiecontent .content .contentitem .left .hang .itemvalues {
  font-size: 0.625rem;
  font-family: PingFangHK-Regular, PingFangHK;
  font-weight: 400;
  color: #FE7743;
  padding: 0 0.125rem;
  border: 1px solid #FE7743;
  margin-right: 0.3125rem;
}

.main .duijiecontent .content .contentitem .right{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.main .duijiecontent .content .contentitem .right .shenhestatus {
  font-size: 0.75rem;
  font-family: PingFangHK-Medium, PingFangHK;
  font-weight: 500;
  color: #B5B2A5;
  border-radius: 0.875rem;
  border: 1px solid #F5F5F5;
  text-align: center;
  width: 4rem;
  height: 1.6875rem;
  line-height: 1.6875rem;
  margin-right: 0.6875rem;
}

.main .duijiecontent .content .contentitem .right .righttime {
  font-size: 0.5rem;
  font-family: PingFangHK-Regular, PingFangHK;
  font-weight: 400;
  color: #8D8D8D;
  margin-top: 4.6875rem;
  margin-right: 0.6875rem;
  display: flex;
}


/* content结束 */
/* duijie开始 */
.main .duijiecontent .duijie .duijieitem {
  width: 17.875rem;
  height: 19.125rem;
  margin-left: 1.3125rem;
  margin-bottom: 1.25rem;
  background: #FFFFFF;
}

.main .duijiecontent .duijie .duijiehang .duijiexiangmu {
  font-size: 1.25rem;
  font-family: PingFangHK-Semibold, PingFangHK;
  font-weight: 600;
  color: #000000;
  line-height: 1.75rem;
  letter-spacing: 0.0625rem;
}

.main .duijiecontent .duijie .duijiehang .duijietype {
  padding-top: 2.5rem;
}

.main .duijiecontent .duijie .duijiehang .duijietype input {
  font-size: 0.875rem;
  font-family: PingFangHK-Semibold, PingFangHK;
  font-weight: 600;
  color: #000000;
  padding-left: 10px;
}

.main .duijiecontent .duijie .duijiehang .xingming {
  width: 14rem;
  height: 2.75rem;
  line-height: 2.75rem;
  background: #F9FAF9;
  border-radius: 4px;
  margin-top: 1.1875rem;
  margin-left: 2.0625rem;
  padding-left: 0.625rem;

}

.main .duijiecontent .duijie .duijiehang .dianhua {
  width: 14rem;
  height: 2.75rem;
  line-height: 2.75rem;
  background: #F9FAF9;
  border-radius: 4px;
  margin-top: 1.1875rem;
  margin-left: 2.0625rem;
  padding-left: 0.625rem;
}

.main .duijiecontent .duijie .duijiehang .fasong {
  height: 2.75rem;
  line-height: 2.75rem;
  background: #FE7743;
  border-radius: 4px;
  text-align: center;
  font-size: 0.875rem;
  font-family: PingFangHK-Semibold, PingFangHK;
  font-weight: 600;
  color: #FFFFFF;
}
</style>
